<template>
	<view>
		<picker :range="range" :range-key="name" :value="index" @change="pickerChange">
			{{range[index]?range[index].name:'请选择'}}
		</picker>
	</view>
</template>

<script>
	export default {
		name: 'NormalPicker',
		model: {
			prop: 'name',
			event: 'change',
		},
		props: {
			search: {
				type: Boolean,
				default: false,
			},
			value: Number | String,
			range: {
				type: Array,
				default: () => []
			},
			name: {
				type: String,
				default: 'name'
			},
		},
		watch: {
			name: {
				immediate: true,
				handler(val) {
					if (val == null) {
						this.index = null;
					} else {
						this.initSelect()
					}
				}
			},
			range() {
				this.initSelect()
			}
		},
		methods: {
			initSelect() {
				this.index = this.range.findIndex(item => item.id == this.name);
			},
			pickerChange(e) {
				this.index = e.detail.value;
				this.$emit('change', this.range[this.index].id)
			}
		},
		data() {
			return {
				index: null
			}
		},
	}
</script>

<style lang="scss">
</style>